import React from 'react';
import {
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import { Icon } from '../../../component'
import config from '../../../config';

const styles = StyleSheet.create({
    container: {
        height: 48,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
        paddingHorizontal: 15,
    },
    title: {
        fontSize: config.defaultFontSize,
    },
});

const TodoItem = ({ name, isComplete, onPress }) => {
    return (
        <TouchableOpacity
            activeOpacity={1 - config.activeOpacity}
            onPress={() => onPress && onPress()}
            style={styles.container}>

            <Text style={[styles.title, {
                textDecorationLine: isComplete ? 'line-through' : 'none',
                color: isComplete ? config.themeColor : config.defaultFontColor,
            }]}>{name}</Text>

            <Icon color={isComplete ? config.themeColor : config.defaultFontColor}
                name={`icon_star${isComplete ? '_fill' : ''}`} />
        </TouchableOpacity>
    )
}

export default TodoItem